<template>
  <div
    class="dialog"
    v-if="show"
    v-loading.fullscreen.lock="loading"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="body_wapper">
      <div class="body">
        <i
          class="el-icon-close"
          @click="
            show = false;
            $emit('close');
          "
        ></i>
        <div :style="personnel"></div>
        <!-- <dv-border-box-1> -->
        <rz-height :height="20" />
        <div class="content">
          <div class="list">
            <div
              class="item"
              v-for="(item, index) in data.famousChefUnIdResponseList"
              :key="index"
            >
              <div class="title">{{ item.managementDepartment }}</div>
              <rz-height :height="15" />
              <div class="item1">
                <div class="item2">
                  <div>单位数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.unitCount }}</span> 家
                  </div>
                </div>
                <div class="item2">
                  <div>探头数</div>
                  <rz-height :height="6" />
                  <div>
                    <span class="text">{{ item.deviceCount }}</span
                    >台
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div :style="note1">各分局单位探头统计</div>
        </div>
        <rz-height />
        <rz-height />
        <div class="content">
          <div class="table">
            <div style="flex: 1" class="center">监督机构</div>
            <div style="flex: 1" class="center">单位类别</div>
            <div style="flex: 2" class="center">单位名称</div>
            <div style="flex: 5" class="center">摄像头列表</div>
          </div>
          <div
            class="tableBody"
            v-for="(item, index) in data.famousChefListResponseList"
            :key="index"
          >
            <div style="flex: 1" class="center">
              {{ item.managementDepartment }}
            </div>
            <div style="flex: 1" class="center">{{ item.bodyIndustry }}</div>
            <div style="flex: 2" class="center">{{ item.unitName }}</div>
            <div style="flex: 5; display: flex; flex-wrap: wrap" class="center">
              <div
                class="camera-item-container"
                v-for="(item, index) in item.famousChefResponseList"
                :key="index"
                @click="handleClickCamera(item, index)"
              >
                <i class="el-icon-video-play"></i>
                <div style="text-decoration: underline">{{ item.cameraNum }}</div>
              </div>
            </div>
          </div>
          <pagination
            :total="total"
            @pagination="getList"
            :page.sync="query.page"
          />

          <div class="video-content" v-if="showVideoComponent">
            <i class="el-icon-close" @click="showVideoComponent = false;"></i>
            <VideoComponent
              ref="videoComponent"
              :cameraTittle="cameraTittle"
              :currentCameraTitle="currentCameraTitle"
            >
            </VideoComponent>
            <div class="notOnline" v-if="isShowNotOnline">
                              <i class="el-icon-circle-close"></i>              
                <span class="text">该监控点不在线</span>              
            </div>
          </div>
           <div :style="note1">单位列表</div>
        </div>
      </div>
  <rz-height/>
  <rz-height/>
  <rz-height/>
  <rz-height/>
    </div>
  </div>
</template>
<script>
import { findFamousChefDetails } from "@/api/modules/home";
import { getCameraStatus } from "@/api/cadre.js";
import VideoComponent from "@/views/home/home/components/videoComponent.vue";
export default {
  // props:[],
  // 页面加载
  created() {
    this.getList();
  },
  // 页面加载完成
  mounted() {},
  //实例销毁之前
  beforeDestroy() {},
  //实例销毁后
  destroyed() {},
  data() {
    return {
      loading: true,
      show: true,
      note1: {
        backgroundImage: "url(" + require("@/assets/images/item13.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        position: "absolute",
 left: "20px",
 paddingLeft: "10px",
  width:'170px',
  top: "0",
  transform: "translateY(-50%)",
  color:"white",
  fontSize:'14px',
  height:'25px',
  lineHeight: '24px',
        
      },
      personnel: {
        width: "500px",
        margin: "0 auto",
        backgroundImage: "url(" + require("@/assets/images/item14.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "100% 100%",
        height: "50px",
      },
      query: {
        isPage: 0,
        page: 1,
        pageSize: 10,
      },
      data: {},

      total: 0,
      cameraTittle: "",
      currentCameraTitle: "",
      showVideoComponent: false,
      isShowNotOnline: false,
    };
  },
  // 方法
  methods: {
    async getList() {
      let { data } = await findFamousChefDetails(this.query);
      this.data = data;
      this.loading = false;
      this.total = Number(data.listSize);
    },
    handleClickCamera(item, index) {
      this.showVideoComponent = true;
      this.getCameraStatusAsync(item.indexCode);
      this.currentCameraTitle = "画面" + (Number(index) + 1);
      this.$nextTick(() => {
        this.$refs.videoComponent.getPreviewURLs(item.indexCode);
      });
    },
    //获取摄像头状态
    async getCameraStatusAsync(cameraIndexCode) {
      try {
        const res = await getCameraStatus({ cameraIndexCode: cameraIndexCode });
        if (res.code === "0" && res.data.status === 1) {
          this.isShowNotOnline = false;
        } else {
          this.$message.info("摄像头不在线!");
          this.isShowNotOnline = true;
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
  // 监听属性
  watch: {},
  // 组件
  components: { VideoComponent },
  // 计算属性
  computed: {},
};
</script>

<style lang="scss" scoped>
.dialog {
  position: absolute;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
  overflow: auto;
  .body_wapper {
    height: 100%;
    width: 90%;
    left: 5%;
    top: 5%;
    position: absolute;
    .body {
      background: url(../../../../assets/images/background.jpg);
      padding: 20px;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      .el-icon-close {
        color: #2760b5;
        font-size: 30px;
        border-radius: 30px;
        cursor: pointer;
        border: 2px solid #2760b5;
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1;
      }

      // .dv-border-box-1 {
      //   height: auto;
      .content {
        position: relative;
        padding: 30px 20px;
        background: url(../../../../assets/images/item10.png),
          url(../../../../assets/images/item8.png),
          url(../../../../assets/images/item9.png),
          url(../../../../assets/images/item11.png);
        background-position: top left, top right, bottom right, bottom left;
        background-repeat: no-repeat;
        border: 1px solid #1556ab;
        .list {
          color: #fff;
          display: flex;
          justify-content: space-around;

          .item {
            flex: 1;
            padding: 0 10px;
            // min-width: 150px;
            // flex-basis: 100px;
            // height: 90px;
            // display: flex;
            // flex-direction: column;
            // justify-content: center;
            // div {
            //   text-align: center;
            //   font-weight: 700;
            // }
            // cursor: pointer;
            .item1 {
              display: flex;
            }
            .item2 {
              display: flex;
              flex: 1;
              flex-direction: column;
              text-align: center;
              .text {
                font-size: 16px;
                color: #71f2f4;
              }
            }
            .title {
              font-size: 16px;
              background: url(../../../../assets/images/item12.png);
              text-align: center;
              background-size: 100% 100%;
              padding: 3px 0;
            }
          }
        }

        .table {
          display: flex;
          align-items: center;
          height: 40px;
          color: #fff;
          background-color: #125fb1;
          font-size: 14px;
          font-weight: 700;
        }
        .tableBody {
          display: flex;
          align-items: center;
          padding: 10px 0;
          font-size: 14px;
          color: #fff;
          border-bottom: 1px solid #125fb1;
          .camera-item-container {
            display: flex;
            padding: 10px;
            align-items: center;
            cursor: pointer;
            color: #71f2f4;
          }
         
          
        }
        .video-content {
          z-index: 10;
          position: fixed;
          left: 50%;
          top: 3%;
          bottom: 3%;
          width: 90%;
          color: #fff;
          transform: translateX(-50%);
          background-color: #00104e;
          padding: 30px 20px 20px 20px;
        }
      }
      // }
    }
  }
   /deep/ .el-pagination__total{
            color: #fff;
          
          }
}
</style>